import React, {
	useState
} from 'react';
import './dragComps.less';
import { } from 'antd';

import compMenusData from './compMenus';

function DragComps(props:{onDragMenuStart:Function}):JSX.Element{
	const [compMenus] = useState(compMenusData);

	function onDragStart(key:string){
		// console.log(key)
		props.onDragMenuStart(key);
	}

	return (
		<div className="dragComps">

			{compMenus.map((item,index)=>(
				<div className="col" key={index}>
					<h4 className="tit">{item.title}</h4>
					<div className="itemBox">
						{item.items.map(item2=>(
							<div 
								className="item" 
								key={item2.key}
								draggable={true}
								onDragStart={(e)=>onDragStart(item2.key)}
							>
								<span className={'icon ' + item2.icon} ></span>
								<span className="text">{item2.name}</span>
							</div>
						))}
					</div>
				</div>
			))}
			
		</div>
	);
};

export default DragComps;
